<template>
  <view class="page page-image p-h30">
    <up-navbar placeholder bgColor="transparent">
      <template #left>
        <view />
      </template>
      <template #center>
        <view class="text-700-132">找工作</view>
      </template>
    </up-navbar>

    <SearchView @blur="handleInputChange" />
    <FilterView @change="handleChange" />
    <OfficeView :list="positionList" />
    <up-empty mode="list" text="暂无数据" v-if="!positionList.length"></up-empty>
  </view>
</template>

<script lang="ts" setup>
import SearchView from './components/search.vue'
import FilterView from './components/filter.vue'
import OfficeView from './components/office.vue'
import { ref, reactive } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
const form = reactive({ page: 1, limit: 10, title: "" })
const positionList = ref([])

const getPositionList = () => {
  uni.$u.get('/position/lst', form).then((res) => {
    if (res.code === 1) {
      positionList.value = positionList.value.concat(res.data.data)
    }
  })
}
function handleInputChange(e) {
  const title = e.detail.value
  handleChange(title)
}
function handleChange(title) {
  form.title = title
  form.page = 1
  positionList.value = []
  getPositionList()
}
onLoad((e) => {
  getPositionList()
})
onReachBottom(() => {
  form.page += 1
  getPositionList()
  console.log("触底了")
})
</script>

<style lang="scss" scoped>
.page {
  background-color: $page-color-1;
}
</style>
